{% extends 'layouts/base.html' %}

{% load bootstrap3 %}
{% load staticfiles %}

{% block script %}
    <script src="{% static 'plupload/js/moxie.min.js' %}"></script>
    <script src="{% static 'plupload/js/plupload.min.js' %}"></script>
    <script src="{% static 'plupload/js/i18n/zh_CN.js' %}"></script>
    <script src="{% static 'js/profile.js' %}"></script>
{% endblock %}


{% block content %}
    {% bootstrap_messages %}
    <h2>{{ title }}</h2>
    <form action="{% url 'profile' %}" method="post" class="form-horizontal" role="form">
        {% csrf_token %}
        {% bootstrap_form_errors form %}
        <div class="form-group">
            <label class="col-md-2 control-label">头像</label>

            <div class="col-md-4">
                <div class="form-control-static avatar-upload-container" id="avatar-upload-container">
                    <div class="preview">
                        {% if user.avatar %}
                        <img src="{{ user.avatar.url }}" alt="{{ user.nickname }}" class="avatar">
                        {% else %}
                        <img src="{% static 'images/avatar.jpg' %}" alt="{{ user.nickname }}" class="avatar">
                        {% endif %}
                        <div class="loading"></div>
                    </div>
                    <a href="javascript:void(0)" id="avatar-file">选择图片</a>

                    <p class="note">左侧预览你上传的头像(60 * 60)</p>

                    <div class="help-block help-block-error"></div>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="col-md-2 control-label">电子邮箱</label>

            <div class="col-md-4">
                <div class="form-control-static">
                    {{ user.email }}
                </div>
            </div>
        </div>
        {% bootstrap_form form layout='horizontal' %}
        <div class="form-group">
            <div class="col-md-offset-2 col-md-4">
                <button type="submit" class="btn btn-primary">确定</button>
            </div>
        </div>
    </form>
{% endblock %}
